<template>
    <div class="app-container">
        <div class='table' v-cloak>
            <div class='table-left'>
                <div class="sy-data">节数</div>
                <div class="sy-data" v-for='(item,index) in dataApplyOrder' :key="index">{{index+1}}</div>
            </div>
            <div class='table-right'>
                <div class='table-right-top'>
                    <div class="sylla">周一</div>
                    <div class="sylla">周二</div>
                    <div class="sylla">周三</div>
                    <div class="sylla">周四</div>
                    <div class="sylla">周五</div>
                    <div class="sylla">周六</div>
                    <div class="sylla">周日</div>
                </div>
                <div class="sylla-container sylla" v-for='(item,index) in dataApply' :key="index"><input type='text' class="placeColor" maxlength='6' placeholder="请输入科目" v-model='dataApply[index]'/></div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    data() {
        return {
            dataApply: [],
            dataApplyOrder: [],
            batchBind: {
                dialogFormVisible: false
            }
        }
    },
    created() {
        // this.getFirstList();
    },
    methods: {
        // 父组件调用展示课程表
        create() {
            this.dataApply = this.dataList1;
        },
        getList1() {
            this.dataApply = [];
            this.dataApplyOrder = [];
            for (let i = 0;i < 56 ;i++) {
                let temp = '';
                this.dataApply.push(temp);
            }
            for (let i = 0;i < 8 ;i++) {
                let temp = '';
                this.dataApplyOrder.push(temp);
            }
        },
        getList2(dataList) {
            this.dataApply = [...dataList];
            this.dataApplyOrder = [];
            for (let i = 0;i < dataList.length/7;i++) {
                let temp = '';
                this.dataApplyOrder.push(temp);
            }
        },
        // 新增一行
        updateAdd() {
            if (this.dataApplyOrder.length>11) {
                this.$message('课程表最多12行')
                return;
            }
            for (let i = 0;i < 7 ;i++) {
                let temp = '';
                this.dataApply.push(temp);
            }
            this.dataApplyOrder.push('');
        },
        // 减少一行
        updateReduce() {
            if (this.dataApplyOrder.length<5) {
                this.$message('课程表最少4行')
                return;
            }
            this.dataApply.splice(this.dataApply.length-7, 7);
            this.dataApplyOrder.pop()
        },
        // 父组件调用获取课程表
        getDataApply() {
            return this.dataApply;
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 18px 10px;
    .table{
        font-size: 14px;
        box-sizing:border-box;
        width:100%;
        text-align:center;
        .table-left{
            background:#f7f7f7;
            box-sizing:border-box;
            width:12%;
            height:100%;
            border:1px solid #ccc;
            border-bottom:none;
            border-right:none;
            line-height:50px;
            float:left;
            .sy-data{
                box-sizing:border-box;
                border:1px solid #ccc;
                float:left;
                width:100%;
                height:50px;
                border-top:none;
                border-left:none;
            }
        }
        .table-right{
            box-sizing:border-box;
            width:88%;
            height:100%;
            border:1px solid #ccc;
            border-right:none;
            border-left:none;
            border-bottom:none;
            float:left;
            .sylla{
                box-sizing:border-box;
                border:1px solid #ccc;
                float:left;
                width:14.285%;
                height:50px;
                border-top:none;
                border-left:none;
                input{
                    border:none;
                    width:100%;
                    height:100%;
                    outline:none;
                    line-height:50px;
                    padding:0 20px;
                    text-align:center;
                    font-size: 12px;
                }
                input::-webkit-input-placeholder {
                    color: rgba(136, 130, 130, 0.38);
                    font-size: 12px;
                }
                ::-webkit-input-placeholder { /* WebKit browsers */  
                    color: rgba(136, 130, 130, 0.38);
                    font-size: 12px;
                }  
                :-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
                    color: rgba(136, 130, 130, 0.48);
                    font-size: 12px; 
                }  
                ::-moz-placeholder { /* Mozilla Firefox 19+ */  
                    color: rgba(136, 130, 130, 0.48);
                    font-size: 12px;
                }  
                :-ms-input-placeholder { /* Internet Explorer 10+ */  
                    color: rgba(136, 130, 130, 0.48);
                    font-size: 12px;
                }
            }
            .table-right-top{
                box-sizing:border-box;
                height:50px;
                line-height:50px;
                font-size: 14px;
                border-bottom:1px solid #ccc;
                background:#f7f7f7;
            }
        }
    }
}

</style>
